<template>
  <div id="RightMenu" class="right-menu">
    <el-menu
      default-active="activeIndex"
      class="el-menu-vertical-demo"
      :collapse="true"
      @select="handleSelect"
      background-color="rgba(0, 60, 136, 0.6)"
      text-color="#fff"
      active-text-color="rgba(0, 60, 136, 0.7)"
    >
      <el-tooltip
        content="地图查询"
        placement="left"
        effect="customized"
        v-if="userInfo.type === 'traffic' || userInfo.type === 'admin'"
      >
        <el-sub-menu index="0" class="menu-item">
          <template #title>
            <el-icon>
              <Crop />
            </el-icon>
          </template>
          <all-draw-search></all-draw-search>
        </el-sub-menu>
      </el-tooltip>

      <el-tooltip
        content="图层目录"
        placement="left"
        effect="customized"
        v-if="userInfo.type === 'traffic' || userInfo.type === 'admin'"
      >
        <el-menu-item index="1" class="menu-item">
          <el-icon @click="showDirectoryTree = true">
            <Coin />
          </el-icon>
        </el-menu-item>
      </el-tooltip>

      <el-tooltip content="导出地图" placement="left" effect="customized">
        <el-menu-item index="2" class="menu-item">
          <el-icon @click="exportImage">
            <Bottom />
          </el-icon>
        </el-menu-item>
      </el-tooltip>

      <el-tooltip
        content="统计图表"
        placement="left"
        effect="customized"
        v-if="userInfo.type === 'traffic' || userInfo.type === 'admin'"
      >
        <el-menu-item index="3" class="menu-item">
          <el-icon @click="toggleEcharts" class="icon-center">
            <Histogram />
          </el-icon>
        </el-menu-item>
      </el-tooltip>

      <el-tooltip content="复位地图" placement="left" effect="customized">
        <el-menu-item index="4" class="menu-item">
          <el-icon @click="resetMap"><Refresh /></el-icon>
        </el-menu-item>
      </el-tooltip>

      <el-tooltip
        content="热力图"
        placement="left"
        effect="customized"
        v-if="userInfo.type === 'traffic' || userInfo.type === 'admin'"
      >
        <el-menu-item index="5" class="menu-item">
          <el-icon @click="heatMap"> <HelpFilled /> </el-icon>
        </el-menu-item>
      </el-tooltip>
    </el-menu>
  </div>
  <el-dialog
    v-model="showDirectoryTree"
    class="directory-tree-dialog"
    title="图层目录"
    :modal="false"
    :width="200"
  >
    <directory-tree></directory-tree>
  </el-dialog>

  <el-card v-if="showEchartsBar">
    <echarts-bar></echarts-bar>
  </el-card>
  <el-card v-if="showEchartsLine">
    <echarts-level></echarts-level>
  </el-card>
  <el-card v-if="showEchartsCircle">
    <echarts-circle></echarts-circle>
  </el-card>
  <el-card v-if="showEventCard">
    <event-card></event-card>
  </el-card>
</template>

<script setup>
import DirectoryTree from "../views/home/components/traffic/DirectoryTree.vue";
import EchartsLevel from "../views/home/components/traffic/EchartsLevel.vue";
import EchartsBar from "../views/home/components/traffic/EchartsBar.vue";
import EchartsCircle from "../views/home/components/traffic/EchartsCircle.vue";
import EventCard from "../views/home/components/traffic/EventCard.vue";
// 导入拉框查询所有元素的组件
import AllDrawSearch from "../views/home/components/traffic/DrawSearch/AllDrawSearch.vue";
import { Query } from "../utils/Query";
import { usePiniaStore } from "../stores/pinia";
import { storeToRefs } from "pinia";
const piniaStore = usePiniaStore();
// 用户信息
const { userInfo } = storeToRefs(piniaStore);
/*	第一个按键所控制的组件  */
const showDirectoryTree = ref(false);
/*	第三个按键所控制的组件  */
const showEchartsBar = ref(false);
const showEchartsLine = ref(false);
const showEchartsCircle = ref(false);
const showEventCard = ref(false);
const {isShowTopText} = storeToRefs(piniaStore)
const toggleEcharts = () => {
  showEchartsLine.value = !showEchartsLine.value;
  showEchartsBar.value = !showEchartsBar.value;
  showEchartsCircle.value = !showEchartsCircle.value;
  showEventCard.value = !showEventCard.value;
  console.log(isShowTopText.value)
  isShowTopText.value = !showEventCard.value;
};
let $map = null;
let $docLayer = null;

onMounted(() => {
  $docLayer = inject("$map");
  $map = inject("$map");
});
/* 导出图片 */
function exportImage() {
  $map.once("postcompose", function (event) {
    const canvas = event.context.canvas;
    console.log(canvas);
    canvas.toBlob(function (blob) {
      console.log(blob);
      saveAs(blob, "map.png");
    });
  });
  $map.renderSync();
}
// 定位
function resetMap() {
  $map.getView().animate({
    center: [114.3694, 30.49],
    zoom: 13,
    duration: 1000,
  });
}
/* 渲染热力图 */
let isShowHeatMap = false;
let hotSoure = new ol.source.Vector({});
let hotLayer = new ol.layer.Heatmap({
  // 矢量数据源(读取本地事件图层)
  source: hotSoure,
  //   热点半径
  radius: 15,
  // 模糊尺寸
  blur: 15,
  gradient: ["green", "yellow", "red"],
  zIndex: 1000,
  opacity: 1,
});

const hotSuccess = (data) => {
  let format = new Zondy.Format.PolygonJSON();
  let features = format.read(data);
  // console.log(features, 555);
  hotSoure.addFeatures(features);
};
Query.queryByLayer({
  service: { name: "guanggu", layerId: 2 },
  success: hotSuccess,
});
/* 控制热力图的显隐 */
function heatMap() {
  isShowHeatMap = !isShowHeatMap;
  if (isShowHeatMap) {
    $map.addLayer(hotLayer);
  } else {
    $map.removeLayer(hotLayer);
  }
}

// 当前激活的菜单项
const activeIndex = ref();
// 激活某个菜单项调用的函数
const handleSelect = (key, keyPath) => {
  // console.log(key, keyPath);
  activeIndex.value = key;
};
</script>

<style lang="scss">
.right-menu {
  position: fixed;
  // top: 290px;
  bottom: 160px;
  right: 10px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  padding: 4px;
  // .el-sub-menu{
  //    :deep(.el-sub-menu__title) {
  //   // padding-inline: 17px;
  //   padding: 0;
  // }
  // }
  .el-menu.el-menu-vertical-demo {
    // background-color: rgba(0, 60, 136, 0.6);
    border-radius: 2px;
  }
  .el-menu-item.menu-item.el-tooltip__trigger.el-tooltip__trigger,
  .el-sub-menu__title.el-tooltip__trigger.el-tooltip__trigger {
    // color: #fff;
    padding: 0 8px;
    height: 40px;
    // &:hover {
    //   // background-color: rgba(0, 60, 136, 0.7);
    // }
  }
  .el-sub-menu__title.el-tooltip__trigger.el-tooltip__trigger {
    background-color: rgba(0, 60, 136, 0) !important;
    &:hover {
      background-color: rgba(0, 60, 136, 0.7) !important;
    }
  }
  .el-menu.el-menu--vertical.el-menu--collapse.el-menu-vertical-demo {
    width: 40px;
  }
}

.el-dialog.directory-tree-dialog {
  margin: 0 !important;
  position: fixed !important;
  top: 350px;
  right: 78px;
  padding: 15px;
  // background-color: rgba(0, 60, 136, 0.6);
}
.el-icon {
  margin-right: 0px !important;
}

.el-dialog.directory-tree-dialog .el-dialog__body {
  padding: 0;
}

.directory-tree-dialog .el-dialog__header {
  padding: 0px;
  padding-bottom: 10px;
}

.echarts-card {
  position: absolute;
  z-index: 9999;
  // svg {
  //   align-items: center;
  //   justify-content: center;
}

/* 按钮图标hover样式 */
.el-popper.is-customized {
  color: #fff;
  padding: 6px 12px;
  background-color: rgba(0, 60, 136, 0.6);
}
.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(
    45deg,
    rgba(0, 60, 136, 0),
    rgba(0, 60, 136, 0.6)
  );
  right: 0;
}
.el-dialog__close{
  top:-17px;
  right:-12px;
} 
// .directory-tree-dialog .el-dialog__header {
//   text-align: center; /* 居中标题文本 */
//   padding-left: 10px; /* 向右移动标题文本 */
// }

</style>
